<template>
  <h1 style="width: 100%;text-align: center;margin-bottom: 30px">SpuList</h1>
  <el-button type="primary" size="default" icon="ele-Plus" @click="emit('setState',1)">添加Spu</el-button>
  <el-table :data="spuList" border stripe :style="{margin:'15px 0'}">
    <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
    <el-table-column label="SPU名称" prop="spuName"></el-table-column>
    <el-table-column label="SPU描述" prop="description"></el-table-column>
    <el-table-column label="操作">
      <template #default="{row,$index}">
        <el-button type="primary" size="small" icon="ele-Plus" title="添加Sku"></el-button>
        <el-button type="primary" size="small" icon="ele-Edit" title="修改Spu" @click="emit('setState', 1, row)"></el-button>
        <el-button type="info" size="small" icon="ele-InfoFilled" title="列表信息"></el-button>
        <el-button type="danger" size="small" icon="ele-Delete" title="删除"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    v-model:page-size="limit"
    v-model:current-page="page"
    :total="total"
    :page-sizes=[3,5,7,9]
    layout="sizes,prev,pager,next,jumper"
  />
</template>

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'SpuList',
});
</script>
<script setup lang="ts">
import {ref, watch} from 'vue';
import {requestSpuList, type SpuInfoType} from '@/api/spu';
import useAttrStore from '@/stores/attr';
import {storeToRefs} from 'pinia';
import {ElMessage} from 'element-plus';
//引入小菠萝代理数据
const attrStore = useAttrStore();
const {category3Id} = storeToRefs(attrStore);
const page = ref<number>(1);
const limit = ref<number>(3);
const total = ref<number>(0);
//给父级组件传递state切换组件展示
const emit = defineEmits<{
  (event:'setState',state:number,row?:SpuInfoType):void
}>()

//创建接收返回列表的响应式数据
const spuList = ref<SpuInfoType[]>([]);
//获取分页列表函数封装
const getSpuList = async () => {
  try {
    const result = await requestSpuList(page.value, limit.value, category3Id.value as number);
    spuList.value = result.records;
    total.value = result.total;
  } catch (e) {
    ElMessage.error('Spu列表获取失败', (e as any).message);
  }
}
watch([category3Id, page, limit],() => {
  if (category3Id.value === null) {
    spuList.value = [];
    total.value = 0;
    return;
  }
  getSpuList()

}, {immediate: true});

</script>

<style scoped>

</style>